<template>
  <div class="goodtabcontent">
    <goods-cover class="goods-cover">
      <template>
        <goods-cover-item
          @click.native="detail(item)"
          class="item"
          v-for="item in content"
          :key="item.id"
        >
          <template #good_img>
            <img :src="item.img" alt />
          </template>
          <template #good_name>
            <p class="good_name">{{item.gname}}</p>
          </template>
          <template #good_price>
            <p class="good_price">{{item.prices|showPrice}}</p>
          </template>
          <template #good_zan>
            <p class="good_zan">{{item.zan}}</p>
          </template>
        </goods-cover-item>
      </template>
    </goods-cover>
  </div>
</template>

<script>
import GoodsCover from "components/public/goods_cover/GoodsCover";
import GoodsCoverItem from "components/public/goods_cover/GoodsCoverItem";
export default {
  name: "GoodTabContent",
  data() {
    return {
      active: Number(this.$route.query.categrayId) + 1
    };
  },
  props: {
    datas: {
      type: Array
    }
  },
  computed: {
    content() {
      if (this.datas) {
        return this.datas.filter((item, index) => {
          return item.categroy_id == this.active;
        });
      }
    }
  },
  components: {
    GoodsCover,
    GoodsCoverItem
  },
  created() {
    this.$bus.$on("toggle", cateId => {
      //  console.log(cateId);
      this.active = cateId;
    });
  },
  methods: {
    detail(item) {
      this.$router.push({
        path: `/good/${item.id}`,
        query: {
          categroy_base_id: item.categroy_base_id
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.goodtabcontent {
  background-color: #fff;
  .goods-cover {
    -moz-column-count: 2; /* Firefox */
    -webkit-column-count: 2; /* Safari 和 Chrome */
    column-count: 2;
    -moz-column-gap: 0px;
    -webkit-column-gap: 0px;
    column-gap: 0px;
    display: inline-block;
    .item {
      break-inside: avoid;
      img {
        width: 95%;
        border-radius: 5px;
      }
      .good_name {
        font-size: 16px;
        height: 42px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .good_price {
        font-size: 16px;
        font-weight: 700;
      }
      .good_zan {
        padding-left: 15px;
        position: relative;
        vertical-align: middle;
      }
      .good_zan::before {
        content: "";
        display: block;
        width: 15px;
        height: 15px;

        position: absolute;
        top: 50%;
        transform: translateY(-55%);
        left: 0;
        background-image: url("~assets/images/icon/zan.svg");
        background-size: 100%;
      }
    }
  }
}
</style>